﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">

<head th:replace="common::head">

</head>
<style>
    .news {
        top: 5px;
        left: 33px;
        color: #fff;
        position: absolute;
        width: 20px;
        height: 20px;
        background: #f67373;
        border-radius: 30px;
        line-height: 20px;
        text-align: center;
    }

    .text-muted {
        color: #aaa;
    }

    .dropdown-menu > li > a i {
        color: #566374;
    }

    .texthover:hover {

    }

    .dropdown-menu > li > a:hover {
        color: #00aaff;
    }

    .cstx {
        width: 20px;
        height: 18px;
        line-height: 20px;
        background: #f78484;
        color: #fff;
        border-radius: 3px;
    }

    .xxtz {
        width: 20px;
        height: 18px;
        line-height: 20px;
        background: #fabe28;
        color: #fff;
        border-radius: 3px;
    }

    .nav_bg {
        width: 100%;
        height: 20px;
        background: #f78484;
    }

    .arrowhead {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid #f78484;
        position: absolute;
        right: 36px;
        top: -5px;
    }
</style>
<body>
<footer th:replace="common::footer"></footer>
<div id="wrapper">
    <div id="navTop">
        <nav class="navbar navbar-default top-navbar" role="navigation" xmlns:th="http://www.thymeleaf.org"
        >
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/" style="padding:18px 15px;width:378px">
                    <img src="../static/assets/img/logo.png" width="35px" style="float: left;"
                         th:src="@{/assets/img/logo.png}"/>
                    <div style="float: left;width: 300px;margin-left: 12px">车辆GPS管理平台</div>
                </a>
                <div id="sideNav">
                    <i class="fa fa-bars icon"></i>
                </div>
            </div>
            <ul id="activeul" class="nav navbar-top-links navbar-right list">
                <li class="dropdown menuup" id="index">
                    <a class="dropdown-toggle" aria-expanded="false" href="/index">
                        <i class="fa fa-dashboard"></i> <span>首页</span>
                    </a>
                </li>
                <li class="dropdown menuup ">
                    <a class="dropdown-toggle" aria-expanded="false" href="/demo/index/1">
                        <i class="fa fa-envelope fa-fw" class="fa fa-mercury"></i> <span>测试demo</span>
                    </a>
                </li>
                <li class="dropdown">
                    <div class="news" id="messageCount">0</div>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts" id="msgBox">
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#" style="color: #aaa"
                               onclick="JumpTo('/message/shortMessage/')">
                                <strong>查看未读消息</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-alerts -->
                </li>
                <li style="color: #fff;
    border-radius: 70px;
    min-width: 50px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #30a5ffd9;
    padding: 0 9px">
                    <span></span>
                    <!--<li class="dropdown">-->
                    <!--<a class="dropdown-toggle menuname" style="padding: 20px 0"-->
                    <!--sec:authentication="principal.name"></a>-->
                    <!--</li>-->
                    <span id="welcome"></span>
                </li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <style>
                        .message:hover {
                            background-color: #1ebfae;
                            color: #ffffff;
                        }

                        .editPassword:hover {
                            background-color: #1ebfae;
                            color: #ffffff;
                        }

                        .address:hover {
                            background-color: #1ebfae;
                            color: #ffffff;
                        }

                        .logout:hover {
                            background-color: #1ebfae;
                            color: #ffffff;
                        }
                    </style>

                    <div class="dropdown-menu dropdown-user" style="min-width: 353px;margin-right: 16px;padding: 0">
                        <div class="row" style="margin-right: 0;margin-left: 0;">
                            <div class="col-md-4 message"
                                 style="padding-top: 5px;text-align: center;height: 50px;cursor: pointer"
                                 data-toggle="modal" data-target="#myModal">
                                <i class="fa fa-address-card-o"
                                   style="padding-top: 5px;display: block;height: 20px;line-height: 20px"></i>
                                <span style="display: block;height: 30px;line-height: 30px">个人信息</span>
                            </div>
                            <div class="col-md-4 editPassword"
                                 style="padding-top: 5px;text-align: center;height: 50px;cursor: pointer"
                                 data-toggle="modal" data-target="#myModall">
                                <i class="fa fa-key" style="display: block;height: 20px;line-height: 20px"></i>
                                <span style="display: block;height: 30px;line-height: 30px"> 修改密码</span>
                            </div>
                            <div class="col-md-4 address"
                                 style="padding-top: 5px;text-align: center;height: 50px;cursor: pointer"
                                 onclick="JumpTo('/addressList/toShow/')">
                                <i class="fa  fa-address-book-o"
                                   style="display: block;height: 20px;line-height: 20px"></i>
                                <span style="display: block;height: 30px;line-height: 30px"> 通讯录</span>
                            </div>
                            <div class="col-md-12 logout"
                                 style="padding-top: 5px;text-align: center;height: 50px;cursor: pointer"
                                 onclick="logout()">
                                <i class="fa fa-sign-out" style="display: block;height: 20px;line-height: 20px"></i>
                                <span style="display: block;height: 30px;line-height: 30px"> 退出</span>
                            </div>
                        </div>
                    </div>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->

            </ul>

        </nav>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">个人信息修改</h4>
                    </div>
                    <div class="modal-body" style="min-height: 320px">
                        <form class="form-horizontal" action="" id="defaultForm">
                            <div class="form-group col-md-12">
                                <label class="control-label col-md-3"
                                       style=" line-height: 34px; text-align: right;padding: 0">
                                    姓名：</label>
                                <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                    <p class="form-control" id="updName"></p>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="control-label col-md-3"
                                       style=" line-height: 34px; text-align: right;padding: 0">
                                    性别：</label>
                                <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                    <p class="form-control" id="updSex"></p>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="control-label col-md-3"
                                       style=" line-height: 34px; text-align: right;padding: 0">
                                    职务：</label>
                                <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                    <p class="form-control" id="updDuty"></p>
                                </div>
                            </div>
                            <div id="editMessage" style="display: block">
                                <div class="form-group col-md-12">
                                    <label class="control-label col-md-3"
                                           style=" line-height: 34px; text-align: right;padding: 0">
                                        移动电话：</label>
                                    <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                        <input type="text" class="form-control" id="updMobilephone">
                                    </div>
                                </div>
                                <div class="form-group col-md-12">
                                    <label class="control-label col-md-3"
                                           style=" line-height: 34px; text-align: right;padding: 0">
                                        邮箱：</label>
                                    <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                        <input type="text" class="form-control" id="updMail">
                                    </div>
                                </div>
                                <div class="form-group col-md-12">
                                    <label class="control-label col-md-3"
                                           style=" line-height: 34px; text-align: right;padding: 0">
                                        办公电话：</label>
                                    <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                        <input type="text" class="form-control" id="updTel">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-default" id="edit" style="display: inline-block"
                                onclick="updateInformation()">保存
                        </button>
                    </div>


                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <div class="modal fade" id="myModall" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">密码修改</h4>
                    </div>
                    <div class="modal-body" style="min-height: 227px">
                        <form class="form-horizontal" id="updatePasswordForm">
                            <div class="form-group col-md-12">
                                <label class="control-label col-md-3"
                                       style=" line-height: 34px; text-align: right;padding: 0">
                                    原密码：</label>
                                <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                    <input style="width: 100%" type="password" class="form-control" name="oldPassword"
                                           id="oldPassword"/>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="control-label col-md-3"
                                       style=" line-height: 34px; text-align: right;padding: 0">
                                    新密码：</label>
                                <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                    <input style="width: 100%" type="password" class="form-control" name="newPassword"
                                           id="newPassword"/>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="control-label col-md-3"
                                       style=" line-height: 34px; text-align: right;padding: 0">
                                    确认密码：</label>
                                <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                    <input style="width: 100%" type="password" class="form-control"
                                           name="configPassword"
                                           id="configPassword"/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id="updPassWord" class="btn btn-default" onclick="updatePassword()"><i
                                class="fa fa-check"></i>保存
                        </button>
                    </div>


                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <script>
            function updatePassword() {
                var serializeJSON = $('#updatePasswordForm').serializeJSON();
                $.ajax({
                    type: 'PUT',
                    url: '/api/password/update',
                    data: JSON.stringify(serializeJSON),
                    contentType: "application/json",
                    success: function (result) {
                        if (result.success) {
                            Showbo.Msg.alert('修改成功');
                            $('#myModall').modal('hide');
                            document.getElementById('updatePasswordForm').reset();
                        } else {
                            Showbo.Msg.alert(result.message);
                        }
                    }

                })

            }

        </script>
    </div>
    <div id="layout">
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation" id="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">

                    <li>
                        <a href="/demo/index/1"><i class="fa fa-user"></i> 测试加载</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="goTo('/emp/')"><i class="fa fa-user"></i> 用户管理</a>
                    </li>
                    <li>
                        <a href="#" onclick="goTo('/role/')"><i class="fa fa-users"></i> 角色管理</a>
                    </li>
                    <li>
                        <a onclick="goTo('/area/')"><i class="fa fa-object-group"></i> 区域管理</a>
                    </li>
                    <li>
                        <a onclick="goTo('/org/')"><i class="fa fa-building"></i> 单位管理</a>
                    </li>
                    <li>
                        <a onclick="goTo('/grid/')"><i class="fa fa-th-large"></i> 网格管理</a>
                    </li>
                    <li>
                        <a onclick="goTo('/toSysCal/')"><i class="fa fa-calendar"></i> 工作日历</a>
                    </li>
                    <li>
                        <a onclick="goTo('/policy/')"><i class="fa fa-calendar"></i> 政策文件</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="goTo('/toTaskNodelimit/')"><i class="fa fa-sitemap"></i>
                            案件节点</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="goTo('/information/')"><i class="fa fa-sitemap"></i> 案件上报</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="goTo('/pendingTask/')"><i class="fa fa-sitemap"></i> 我的待办</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="goTo('/Urge/')"><i class="fa fa-sitemap"></i> 催办</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="goTo('/eventType/')"><i class="fa fa-sitemap"></i> 事件分类维护</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="goTo('/message/')"><i class="fa fa-sitemap"></i>消息管理</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="goTo('/appImg/')"><i class="fa fa-sitemap"></i> 移动端图片</a>
                    </li>
                </ul>

            </div>

        </nav>
    </div>
    <!-- /. NAV SIDE  -->

    <div id="containerL">

        <div id="page-wrapper">
            <br/>
            <br/>
            <br/>
            <br/>
            <h1>在数据库demo表中添加一条id为1的数据进行测试</h1>
        </div>
        <!-- /. PAGE WRAPPER  -->
    </div>
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->


</body>

</html>